Site Logo

The right side of the webWriter navigation bar is reserved for site branding. The recommended procedure is to create a site logo in the form of a gif (up to 120 pixels wide by 50 pixels high) in the content folder and set the siteLogo variable in constants.js to the name of the image file. Authors can optionally provide more information in the form of a tooltip which will come up when the mouse hovers over the logo. Set your tooltip by setiing the siteTooltip variable to it.

Alternatively, branding can be done by using two lines of text. Set the organization variable to the first line and the course variable to the second line. In order for these to be used, the siteLogo variable must be set to the null string ("").

WebWriter Buttons

TOC   Generates dynamically a table of contents for the whole site using the map hard-coded in nav-map.js as well as properly marked anchors

   go to the previous topic as defined in nav-map.js

   go to the parent topic as defined in nav-map.js

  go to the next topic as defined in nav-map.js

notes             Switch to notes mode which is designed for studying the website at a computer. At the moment switches style sheets.

lecture  Alternate to   notes   Switch to lecture mode which is designed for projection to a class. At the moment switches style sheets and turns off hidden notes

show   Displays extra code notes, usually hidden in lecture mode.

hide   Alternate to  show : Hides extra notes, usually hidden in lecture mode.

shade   Turns on the window shade used in lecture mode to cover up part of the screen.Not available in notes mode.

print             Invokes a frameless print window, copies only the contents frame document to it, turns the hidden container allExamples on, and attaches the print stylesheet so users can see what the printed version will look like. See printing.

help   Bring up the help system. Still a twinkle in my eye.

Buttons can be included or not by setting the appropriante constants in the constant.js script. Similarly, there are constants to control whether the starting mode is lecture or notes and to start with or without the shade if in lecture mode. See the script for details.

Navigation Map

The hard-coded map of site navigation found in site_resources/javascripts/nav-map.js. Here is a partial map for this site:

var root = new Node("pages/coverPage.htm");
var treeWalker = new Walker(root);
var siteTitle = "WebWriter++ Manual";

// Site Navigation map 

// define the directories for convenience
var pages = "pages/";

// Now define the navigation map
root.addChild(new Node(pages + "introduction.htm"));
root.addChild(new Node(pages + "structure.htm"));
root.addChild(new Node(pages + "navigation.htm")); 

root

is the root document for the whole site. A present limitation is it can have no siblings, that is, there is one and only one root node for the site.

treeWalker

the iterator object used by the automatic table of contents generator to walk the navigation map.

siteTitle

the title used when the site is first loaded. This will be displayed in the navigation bar while applets are loaded so it it probably best to use the same title as on your root page to prevent ugly title switching during slow loads.

pages

a convenience variable for the pages directory, of marginal utility in this example. More useful if directories get deeply nested.

addChild

a method of the node class for adding a child to any node, here used to add the page nodes to the root node.

Note that this example is for a flat hierarchy. In a deeper hierarchy, if you want to add nodes to an internal node , you can do the following:

root.addChild(new Node(pages + "introduction.htm"));
var structNode = new Node(pages + "structure.htm");
root.addChild(structNode);
structNode.addChild(new Node(pages + "navigation.htm"));

Which has the effect of adding the navigation page in under the structure page.

Printing Notes

The standard browers print command won't do a very good job of printing. Instead use the print button which creates a frameless print window. It copies only the contents frame document to it and attaches the notesPrint stylesheet so users can see what the printed version will look like. Some considerations:

• Even in lecture mode, the print utility will use the notes version of the stylesheet for printing.
• There is a hidden container called allExamples for holding full length versions of examples. If you only select a portion of an example for display on the web page, consider dropping the same example into this section. Use the same insertCode command as the example except turn the webWriter selection to "all". Full examples will then turn up in the printed versions of the notes at the end.
• Answer boxes will reflect the their state on the page when the button is pushed. If users want to see them, they will have to reveal the answers before they hit the print button.
• The print button doesn't actually print. This is to allow the user to review the page as it will appear when printed. To actually print, invoke the browser's normal print command from within the print window.

Table of Content Entries

The tocGenerator walks the navigation map generating an entry for every node in the map. The entry is the title of the document.

In addition, it automatically picks up anchors from inside pages to make sub-entries for each page. Only named anchors with text between the <a> and </a> tags are picked up. The name is used to qualify the url to take the user directly to the anchor. The text between the opening and closing tags is used as the TOC entry.

If an anchor is needed on a page that is not to be included in the table of contents, simply mark the anchor as a point. For example here is how to include a second level heading—

<h2><a name="tocEntries">Table of Content Entries</a></h2>

and how to leave it out—

<h2><a name="tocEntries"></a>Table of Content Entries</h2>

The second form is perfectly legal since an anchor merely marks a point in a document.

If it is included, the url generated will be pages/navigation#tocEntries while the sub-entry under Navigation & Controls (the title for this page) will be Table of Content Entries

The tocGenerator pays no attention to heading levels.